<template>

    <a-row :gutter="[8,0]">
      <a-space style="margin-bottom: 10px">
        <a-button-group>
          <template v-for="(value,type) in paperTypes">
            <a-button :type="curPaperType === type ? 'primary' : 'info'" @click="setPaper(type,value)">
              {{ type }}
            </a-button>
          </template>
          <a-popover v-model="paperPopVisible" title="设置纸张宽高(mm)" trigger="click">
            <template  #content>
              <a-input-group compact style="margin: 10px 10px">
                <a-input type="number" v-model="paperWidth" style=" width: 100px; text-align: center"
                         placeholder="宽(mm)"/>
                <a-input style=" width: 30px; border-left: 0; pointer-events: none; backgroundColor: #fff"
                         placeholder="~" disabled
                />
                <a-input type="number" v-model="paperHeight" style="width: 100px; text-align: center; border-left: 0"
                         placeholder="高(mm)"/>
              </a-input-group>
              <a-button type="primary" style="width: 100%" @click="otherPaper">确定</a-button>
            </template>
            <a-button :type="'other'==curPaperType?'primary':''">自定义纸张</a-button>
          </a-popover>
        </a-button-group>
        <a-button type="text" icon="icon-zoom-out" @click="changeScale(false)">
          <icon-zoom-out />
        </a-button>
        <!-- <a-input-number
          :value="scaleValue"
          :min="scaleMin"
          :max="scaleMax"
          :step="0.1"
          
          style="width: 70px;"
          disabled
          :formatter="value => `${(value * 100).toFixed(0)}%`"
          :parser="value => value.replace('%', '')"
        /> -->
        <a-button type="text" icon="icon-zoom-in" @click="changeScale(true)">
          <icon-zoom-in />
        </a-button>

        <a-button type="primary" icon="redo" @click="rotatePaper()">旋转</a-button>
        <a-button type="primary" icon="eye" @click="preView">
          预览
        </a-button>
        <a-button type="primary" icon="printer" @click="print">
          直接打印
        </a-button>
        <a-button type="primary" @click="onlyPrint">
          Api单独打印
        </a-button>
        <a-button type="primary" @click="onlyPrint2">
          Api单独直接打印
        </a-button>
        <a-popconfirm
          title="是否确认清空?"
          okType="danger"
          okText="确定清空"
          @ok="clearPaper"
        >
          <a-button type="danger" style="background-color: #ff4d4f; color: #fff;" >
            清空
            <icon-close />
          </a-button>
        </a-popconfirm>
        <!-- <json-view :template="template"/> -->
        <a-button type="primary" icon="printer" @click="viewJsonFun">
          查看模板json
        </a-button>
      </a-space>
      
    </a-row>

    <a-row :gutter="[8,0]">
      <a-col :span="3">
        <a-card>
          <a-row>
            <a-col :span="24" class="rect-printElement-types hiprintEpContainer">
              <a-row class="drag_item_title">拖拽组件列表</a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.text" style>
                      <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                      <p class="glyphicon-class">文本</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.image" style>
                      <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
                      <p class="glyphicon-class">图片</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.longText">
                      <span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
                      <p class="glyphicon-class">长文</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.table" style>
                      <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                      <p class="glyphicon-class">表格</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.emptyTable" style>
                      <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                      <p class="glyphicon-class">空白表格</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.html" style="">
                      <span class="glyphicon glyphicon-header" aria-hidden="true"></span>
                      <p class="glyphicon-class">html</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.customText" style>
                      <span class="glyphicon glyphicon-text-width" aria-hidden="true"></span>
                      <p class="glyphicon-class">自定义</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row class="drag_item_title">辅助</a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.hline" style>
                      <span class="glyphicon glyphicon-resize-horizontal" aria-hidden="true"></span>
                      <p class="glyphicon-class">横线</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.vline" style>
                      <span class="glyphicon glyphicon-resize-vertical" aria-hidden="true"></span>
                      <p class="glyphicon-class">竖线</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.rect">
                      <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span>
                      <p class="glyphicon-class">矩形</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.oval">
                      <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
                      <p class="glyphicon-class">椭圆</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
              <a-row style="height: 100px;">
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.barcode">
                      <span class="glyphicon glyphicon-barcode" aria-hidden="true"></span>
                      <p class="glyphicon-class">条形码</p>
                    </a>
                  </div>
                </a-col>
                <a-col :span="12" class="drag_item_box">
                  <div>
                    <a class="ep-draggable-item" tid="defaultModule.qrcode">
                      <span class="glyphicon glyphicon-qrcode" aria-hidden="true"></span>
                      <p class="glyphicon-class">二维码</p>
                    </a>
                  </div>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="16">
        <a-card class="card-design">
          <div id="hiprint-printTemplate" class="hiprint-printTemplate"></div>
        </a-card>
      </a-col>
      <a-col :span="5" class="params_setting_container">
        <a-card>
          <a-row class="hinnn-layout-sider">
            <div id="PrintElementOptionSetting"></div>
          </a-row>
        </a-card>
      </a-col>
    </a-row>

    <!-- 预览 -->
    <print-preview ref="preViewEle"/>


    <!-- 查看JSON -->
    <a-modal v-model:visible="jsonAreaVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title>
      Title
    </template>
    <div class="json-area">
      <div class="json-area-btn">
        <div>
          <a-switch style="margin-right: 20px">
            <template #checked>
              tid模式
            </template>
            <template #unchecked>
              默认
            </template>
          </a-switch>
          <a-switch>
            <template #checked>
              美化
            </template>
            <template #unchecked>
              默认
            </template>
          </a-switch>
        </div>
      </div>
      <div class="json-area-content">
        <a-textarea placeholder="" v-model="jsonText" allow-clear rows="20" style="height: 380px;"/>
        <!-- {{jsonText}} -->
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './printDesign';
import printPreview from './previewEle/previewEle.vue';
import jsonView from "../jsonView/jsonView.vue";
export default {
    name: 'printDesign',
    components:{
      printPreview,
      jsonView
    },
    setup() {
        const {
          base,
          setPaper,
          changeScale,
          rotatePaper,
          preView,
          preViewEle,
          print,
          onlyPrint,
          clearPaper,
          viewJsonFun,
        } = importConfig();
        return {
          ...toRefs(base),
          setPaper,
          changeScale,
          rotatePaper,
          preView,
          preViewEle,
          print,
          onlyPrint,
          clearPaper,
          viewJsonFun,
        };
    },
};

</script>

<style lang="less" scoped>
// 拖拽
.drag_item_box {
  height: 100%;
  padding: 6px;
}

.drag_item_box > div {
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.drag_item_box > div > a {
  text-align: center;
  text-decoration-line: none;
}

.drag_item_box > div > a > span {
  font-size: 28px;
}

.drag_item_box > div > a > p {
  margin: 0;
}

.drag_item_title {
  font-size: 16px;
  padding: 12px 6px 0 6px;
  font-weight: bold;
}

// 默认图片
:deep(.hiprint-printElement-image-content) {
  img {
    content: url("~@/assets/logo.png");
  }
}

// 辅助线样式
:deep(.toplineOfPosition) {
  border: 0;
  border-top: 1px dashed purple;
}

:deep(.bottomlineOfPosition) {
  border: 0;
  border-top: 1px dashed purple;
}

:deep(.leftlineOfPosition) {
  border: 0;
  border-left: 1px dashed purple;
}

:deep(.rightlineOfPosition) {
  border: 0;
  border-left: 1px dashed purple;
}

// 设计容器
.card-design {
  overflow: hidden;
  overflow-x: auto;
  overflow-y: auto;
}


// 设置按钮颜色
:deep(.arco-btn-primary){
  background-color: #40a9ff;
}

// 设置按钮边框样式
:deep(.arco-btn-size-medium){
  border-width: .5px;
  border-color: rgb(217, 217, 217);
  border-style: solid;
}

.json-area{
  &-btn{
    margin-bottom: 20px;
  }
}
</style>
